<script setup>

import {computed, ref, watch} from "vue";

const props = defineProps({
  cron: {
    type: Object,
    default: ({})
  },
  check: {
    type: Function,
    required: true
  }
})
const emit = defineEmits(['update']);

const radioValue = ref(2);
const weekday = ref(2);
const cycle01 = ref(2);
const cycle02 = ref(3);
const avg01 = ref(1)
const avg02 = ref(2);
const checkboxList = ref([]);
const checkNumber = props.check
const weekList = ref([
  {key: 2, value: '星期一'},
  {key: 3, value: '星期二'},
  {key: 4, value: '星期三'},
  {key: 5, value: '星期四'},
  {key: 6, value: '星期五'},
  {key: 7, value: '星期六'},
  {key: 1, value: '星期日'}
])

const cycleTotal = computed(() => {
  const c1 = checkNumber(cycle01.value, 1, 7)
  const c2 = checkNumber(cycle02.value, 1, 7)
  return `${c1}-${c2}`;
})

const avgTotal = computed(() => {
  const a1 = checkNumber(avg01.value, 1, 4);
  const a2 = checkNumber(avg02.value, 1, 7);
  return `${a1}#${a2}`;
})

const weekdayCheck = computed(() => {
  const w = checkNumber(weekday.value, 1, 7)
  return w;
})

const checkboxString = computed(() => {
  if (checkboxList.value.length === 0) return '*'
  return checkboxList.value.join(',')
})

const onRadioChange = () => {
  if (radioValue.value !== 2 && props.cron.day !== '?') {
    emitUpdate('?', 'day', 'week');
  }
  switch (radioValue.value) {
    case 1:
      emitUpdate('*', 'week');
      break;
    case 2:
      emitUpdate('?', 'week');
      break;
    case 3:
      emitUpdate(cycleTotal.value, 'week');
      break;
    case 4:
      emitUpdate(avgTotal.value, 'week');
      break;
    case 5:
      emitUpdate(weekdayCheck.value + 'L', 'week');
      break;
    case 6:
      emitUpdate(checkboxString.value, 'week');
      break;
  }
}

// 通用更新函数
const emitUpdate = (value, type, args) => {
  args ? emit('update', type, value, args) : emit('update', type, value) // 如：'min', '1-5', 'min'
}

watch(radioValue, onRadioChange)
watch([cycle01, cycle02], onRadioChange)
watch([avg01, avg02], onRadioChange)
watch(weekday, onRadioChange)
watch(checkboxList, onRadioChange, {deep: true})

defineExpose({
  cycle01,
  cycle02,
  avg01,
  avg02,
  radioValue,
  checkboxList,
  weekday
})
</script>

<template>
  <el-form class="demo-form-inline">
    <el-form-item>
      <el-radio v-model="radioValue" :value="1">
        周，允许的通配符[, - * ? / L #]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :value="2">
        不指定
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :value="3">
        周期从
        <el-select clearable v-model="cycle01">
          <el-option v-for="(item,index) of weekList" :key="index" :value="item.key" :label="item.value"
                     :disabled="item.key === 1"/>
        </el-select>
        -
        <el-select clearable v-model="cycle02">
          <el-option v-for="(item,index) of weekList" :key="index" :value="item.key" :label="item.value"
                     :disabled="item.key <= cycle01 && item.key !== 1"/>
        </el-select>
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model='radioValue' :value="4">
        第
        <el-input-number v-model='avg01' :min="1" :max="4"/>
        周的
        <el-select clearable v-model="avg02">
          <el-option v-for="item in weekList" :key="item.key" :label="item.value" :value="item.key"/>
        </el-select>
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model='radioValue' :value="5">
        本月最后一个
        <el-select clearable v-model="weekday">
          <el-option v-for="item in weekList" :key="item.key" :label="item.value" :value="item.key"/>
        </el-select>
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :value="6">
        指定
        <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multipl-limit="6">
          <el-option v-for="item in weekList" :key="item.key" :value="item.key" :label="item.value"/>
        </el-select>
      </el-radio>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
